<template>
    <div>
        <van-sticky>
            <van-nav-bar title="购物车" />
        </van-sticky>
        <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="购物车空空如也！！！" v-if="!store.carts.length">
            <router-link to="/goods" style="color: #000;">快去购买吧！！！</router-link>
        </van-empty>
        <van-swipe-cell v-for="item in store.carts">
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name" class="goods-card">
                <template #thumb>
                    <van-checkbox v-model="item.checked"></van-checkbox>
                    <van-image :src="item.goods.goods_big_logo?item.goods.goods_big_logo:'https://ts4.cn.mm.bing.net/th?id=OIP-C.ygQGtHfTu-yKG2FEomqXSwHaHa&w=249&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'" />
                </template>
                <template #num>
                    <van-stepper v-model="item.number" />
                </template>
            </van-card>
            <template #right>
                <van-button @click="sc(item.id)" square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
        <van-submit-bar class="sy" v-if="store.carts.length" :price="zj*100" button-text="去结算" @submit="onSubmit">
            <van-checkbox v-model="qx">全选</van-checkbox>
        </van-submit-bar>

    </div>
</template>

<script setup>
import { showToast } from 'vant'
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { cartApi } from '../../request/api'
import { useCounterStore } from '../../stores/counter'
const store = useCounterStore()
const route = useRoute()
const router = useRouter()

const qx=computed({
    get(){
        return store.carts.every(item=>item.checked)
    },
    set(val){
        return store.carts.forEach(item=>item.checked=val)
    }
})
const zj=computed(()=>{
    let zj=0
    let sx=store.carts.filter(item=>item.checked)
    sx.forEach(item=>{
        zj+=item.number*item.goods.goods_price
    })
    return zj
})
const sc=(id)=>{
    store.dele(id)
}
const onSubmit=()=>{
    let sx=store.carts.filter(item=>item.checked)
    if(!sx.length){
        showToast({
            type:"fail",
            message:'请选择要结算的商品'
        })
    }else{
        cartApi({
            goodsIds:sx.map(item=>item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:sx[0].goods.goods_name+'等'+sx.length+'件商品',
            totalPrice:zj.value,
            nums:sx.map(item=>item.number).join(',')
        }).then(res=>{
            showToast({
                type:"success",
                message:'订单生成成功',
                onClose(){
                    router.push('/home/order/'+res.data.data.orderId)
                }
            })
        })
    }
}


</script>

<style lang="scss" scoped>
.delete-button {
    height: 100%;
}
.sy{
    margin-bottom: 50px;
}
</style>